<template>
    <el-table
        ref="multipleTable"
        :data="comments"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="Id" min-width="30%"></el-table-column>
        <el-table-column prop="owner" label="Owner" min-width="50%"></el-table-column>
        <el-table-column prop="content" label="Content" min-width="200%" show-overflow-tooltip></el-table-column>
        <el-table-column prop="article_id" label="article_id" min-width="50%"></el-table-column>
        <el-table-column prop="is_deleted" label="is_deleted" min-width="60%"></el-table-column>
        <el-table-column label="created_at" width="120">
            <template #default="scope">{{ $filters.timeFormatter(scope.row.created_at) }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-popconfirm
                    title="确定要执行吗"
                    icon="el-icon-warning"
                    iconColor="red"
                    @confirm="handleDeleteComment(scope.row.id)"
                >
                    <template #reference>
                        <el-button
                            type="text"
                            size="small"
                            :style="'color:' + (scope.row.is_deleted ? 'lightgray' : 'red')"
                            :disabled="scope.row.is_deleted"
                        >删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px;text-align:left">
        <el-button
            @click="toggleAllSelection"
            size="mini"
            type="primary"
        >{{ multipleSelection.length == comments.length ? '取消全选' : '全选' }}</el-button>
        <el-button @click="clearSelection" size="mini">取消选择</el-button>
    </div>

    <el-pagination
        style="margin-top:1em;"
        background
        layout="prev, pager, next"
        :current-page="page"
        :page-size="pageSize"
        :total="total"
        @current-change="getCommentList"
        :hide-on-single-page="true"
    ></el-pagination>
</template>
    
    <script>
import { onMounted, ref } from 'vue';
import { getComments, deleteComment } from '../../api/comments'
import { ElMessage } from 'element-plus';
export default {
    setup() {
        const comments = ref([])
        const total = ref(0)
        const page = ref(1)
        const pageSize = 3

        const getCommentList = (page) => {
            getComments(page - 1, pageSize).then(res => {
                let data = res.data
                total.value = data.total
                comments.value = data.items
            })
        }

        const handleDeleteComment = (id) => {
            console.log("delete row", id)
            deleteComment(id).then(() => {
                ElMessage({
                    showClose: true,
                    type: "success",
                    message: "删除成功"
                })
            })
        }

        const initData = () => {
            getCommentList(1)
        }

        onMounted(initData)

        const multipleSelection = ref([])
        const multipleTable = ref(null)
        const handleSelectionChange = (val) => {
            multipleSelection.value = val;
        }
        const toggleAllSelection = () => {
            multipleTable.value.toggleAllSelection();
        }
        const clearSelection = () => {
            multipleTable.value.clearSelection();
        }

        return {
            comments,
            total,
            page,
            pageSize,
            multipleSelection,
            toggleAllSelection,
            clearSelection,
            handleSelectionChange,
            multipleTable,
            handleDeleteComment,
            getCommentList
        }
    }
}
</script>
    
    <style>
</style>
    